<!-- 新增组别 -->
<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="500px"
    title="添加人员"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <div>
      <el-row :gutter="15">
        <el-form ref="courseForm" class="gl_form_mini" :model="formdata" :rules="rules" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model.trim="formdata.name"
              style="width:320PX"
              type="input"
              size="mini"
              placeholder="请输入姓名"
              maxlength="10"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="证件类型" prop="idCardTypeCode">
            <el-select v-model="formdata.idCardTypeCode" size="mini">
              <el-option v-for="item in dict.idCardType" :key="item.code" :label="item.value" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="idCardNumber" :rules="formdata.idCardTypeCode === 'IdCard' ? rules.idCard : rules.unIdCard">
            <el-input
              v-model="formdata.idCardNumber"
              style="width:320PX"
              type="input"
              size="mini"
              placeholder="请输入证件号码"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24" align="center">
          <el-button type="default" size="mini" @click="close()">取 消</el-button>
          <el-button type="primary" size="mini"  :loading="loading" @click="submitGroupInfo()">确 定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import {api_POST_EventsManagementCompetitionEntryWhiteList } from '@/extend/api/whilteListApi/api'
import {
  api_post_EventsManagementCompetitionEntryWhiteListQO
} from '@/lib/form/whiteList';
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate';
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formdata: new api_post_EventsManagementCompetitionEntryWhiteListQO(),
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCardTypeCode: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkIdNumber(value, '身份证号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        unIdCard: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    submitGroupInfo() {
      const that = this;
      this.$refs.courseForm.validate(valid => {
        if (!valid) return;
        this.loading = true;
        api_POST_EventsManagementCompetitionEntryWhiteList(this.formdata).then(res => {
          this.loading = false;
          this.$message({ type: 'success', message: '添加成功！' });

          that.$parent.$parent.getPageList();
          this.close();
      }, () => {
        this.loading = false;
        this.$message({ type: 'error', message: '添加失败！' });
        });
      });

    },
        // 关闭弹窗
        close () {
      this.$nextTick(() => {
        this.dialogVisible = false,
        this.formdata = new api_post_EventsManagementCompetitionEntryWhiteListQO(),
        this.$refs.courseForm.resetFields();
      });
    }
  }
};
</script>
